<template>
	<view class="dialog-video" >

	  <video  class="video-box" v-if="show" :src="videoData"  id="videoEle" :show-fullscreen-btn="false"  controls autoplay :direction="0" >
				<cover-view @tap="toggleClose" class="video-close" :style="{ top: systemInfo.statusBarHeight + 'px' }">
                    <cover-image class="close" src="/static/close.png" mode="aspectFill" />
				</cover-view>
		</video>

	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
	import {
		onLoad,
		onReady,
		onUnload
	} from '@dcloudio/uni-app'

import { systemInfo as systemInfoStore } from "@/store/systemInfo";
export default defineComponent({
	name: "videoPlay",
	setup(props:any, ctx: any) {

		const systemInfo: any = systemInfoStore();

		const data:any = reactive({
				videoData: '',
				show: false,
				videoContext: null,
				direction: 0
		});
		onLoad((option) => {
			data.videoData = option && option.videoMessage
			data.show = true
		})

		onReady(() => {
			data.videoContext = uni.createVideoContext('videoEle');
		 })
		const toggleClose = () => {
			uni.navigateBack({
				delta: 1,
				success() {
					data.show = false
				}
			});
		}
		onUnload(() => {
			data.show = false
		})
		return {
		  ...toRefs(data),
		  toggleClose,
		  systemInfo
		};
	}
});
</script>
<style lang="scss" scoped>
.dialog-video {
 position: fixed;
 z-index: 999;
 width: 100vw;
 height: 100vh;
 background: rgba(#000000, 0.6);
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 justify-content: center;
 align-items: center;
	.video-box {
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.video-close {
		z-index: 999;
		position: absolute;
        width:60rpx;
        height:60rpx;
		display: flex;
        align-items: center;
        justify-content:center;
		top:30rpx;
		left: 30rpx;
        background: #4c4c4c;
        overflow: hidden;
        border-radius:50rpx;
        .close	{
            width:40rpx;
            height:40rpx;
        }
	}
}
.content {
		&-in {
			border-radius: 6px;
		}
		&-out {
			border-radius: 6px;
		}
 }
</style>
